<template>
  <div class="invoice_box">
    <div class="no-content" v-if="Exam !== 1">
      您还没有权限访问
    </div>
    <div class="invoice_wrapper" v-else>
      <div class="invoice_cell ">
        <div class="invoice_item add_new_addr clearfix" @click="openNewAddr">
          <div class="add_new">
            <i class="el-icon-circle-plus _icon"></i>
            <h3>添加发票</h3>
          </div>
        </div>
      </div>
      <div class="invoice_cell" v-for="(item, index) in invoiceList" :key="index">
        <div class="invoice_item clearfix">
          <p class="type ellipsis">{{item.type === 1 ? '单位': '个人'}}</p>
          <h3 class="company ellipsis">{{item.title }}</h3>
          <div class="code ellipsis" v-if="item.type === 1">
            {{item.eleCode}}
          </div>
          <div class="btns">
            <span class="color-blue" @click="modifyFun(item)">修改</span>
            <span class="color-blue" @click="delateInv(item.id)">删除</span>
          </div>
        </div>
      </div>
    </div>
     <!-- 修改发票 -->
    <el-dialog :title="addrtype === 0 ? '修改发票': '新增发票'" :visible.sync="dialogvisible" width="450px" center>
       <invoice :modform="modform" @close-dialog="closePop"></invoice>
    </el-dialog>
  </div>
</template>

<script>
  import {Button, Form, FormItem, Dialog, Cascader, Input} from 'element-ui'
  import {mapActions, mapState} from 'vuex'
  import {invoice} from '@/components/index'
  import {getCookie} from '@/config/mUntils'
  export default {
    components: {
      elButton: Button,
      elForm: Form,
      elFormItem: FormItem,
      elDialog: Dialog,
      elCascader: Cascader,
      elInput: Input,
      invoice
    },
    data () {
      return {
        modform: {}, // 正在修改的表单数据
        dialogvisible: false, // 弹窗显示
        addrtype: 1 // 地址弹窗类型 0: 修改发票, 1: 新增地址
      }
    },
    computed: {
      ...mapState({
        invoiceList: state => state.invoice.invoiceList
      }),
      Exam () {
        return getCookie('Exam') - 0
      }
    },
    methods: {
      ...mapActions({
        getAll: 'getAllInvoice',
        delateInv: 'deleteInvoice'
      }),
      // 修改发票
      modifyFun (item) {
        this.modform = item
        this.addrtype = 0
        this.dialogvisible = true
      },
      openNewAddr () {
        this.modform = {}
        this.addrtype = 1
        this.dialogvisible = true
      },
      addrPop (result) {
        this.dialogvisible = result
      },
      // 关闭地址弹窗
      closePop () {
        this.dialogvisible = false
        // this.getAll()
      }
    },
    mounted () {
      if (this.Exam !== 1) return
      this.getAll()
    }
  }
</script>

<style lang="scss" scoped>
  .invoice_wrapper{
    margin-top: 24px;
    font-size: 0;
  }
  .invoice_item{
    position: relative;
    border: 1px solid #DCDCDC;
    padding: 24px 18px;
    font-size: 14px;
    color: #666666;
    height: 150px;
    box-sizing: border-box;
    .type, .company, .code{
      margin-bottom: 10px;
      // display: inline-block;
      line-height: 15px;
    }
    .btns{
      margin-top: 28px;
      text-align: right;
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
    .add_new{
      padding-top: 30px;
      text-align: center;
      color:#cbc9c9;
      font-size: 18px;
      line-height: 1.5;
      ._icon{
        font-size: 36px;
      }
    }
  }
  .invoice_cell{
    font-family: PingFangSC-Regular, Microsoft YaHei;
    display: inline-block;
    cursor: pointer;
    width: 264px;
    margin-right: 20px;
    margin-bottom: 20px;
    vertical-align: middle;
    &:nth-child(3n){
      margin-right: 0;
    }
  }
</style>
